<template>
  <div id="channel">
    <!-- header -->
    <magic-header titleName="爱车频道" :returnNative="$route.params.native">
    </magic-header>
    
    <!-- 频道下拉菜单 -->
    <div slot="title-right" layout="row" layout-align="space-between center" class="channel-harder-bar">
      <span flex></span>
      <span flex></span>
      <mu-select-field flex v-model="type" v-if="articleCategorys" :autoWidth="true" underlineFocusClass="underline-focus-class">
        <mu-menu-item :title="item.name" v-for="(item,index) in articleCategorys" :key="index" :value="item.id" />
      </mu-select-field>
    </div>

    <!-- 文章列表 -->
    <ma-scroll :down="true" :getMore="getArticle" :allLoaded="allLoaded" :showMsg="false" :init="init" v-if="init">
      <a class="channel-for-all" v-show="emptyShow">
        <span class="channel-title" v-show="emptyShow">{{emptyTitle}}</span>
      </a>
      <a v-for="(value, key) in carForums" :key="key" class="channel-for-all">
        <span class="channel-title">{{key}}</span>
        <panel :value="item" v-for="(item, index) in value" :key="index" v-tap="{methods: goDetail, item: item}">
          <span slot="desc" class="desc">{{item.desc}}</span>
          <span slot="number" class="date">{{item.publishDate}}</span>
        </panel>
      </a>
    </ma-scroll>

    <!-- empty -->
    <empty v-show="emptyShow" message="当前频道下还没有新文章, 去别的地方看看吧"></empty>
  </div>
</template>

<script>
// components
import panel from "components/panel";
import empty from "components/empty-page"
import magicHeader from "components/magicHeader";
// services
import { ListArticleCategory, ListCarForum } from "services/vBuy/channel"

export default {
  name: "channel",
  components: {
    magicHeader,
    panel,
    empty
  },
  props: {
    categoryId: null, // 目录id, 与路由参数相关
  },
  data() {
    return {
      init: false, // 下拉刷新参数
      page: { // 分页参数
        index: 0,
        count: 6
      },
      articleCategorys: [], // 频道分类
      categoryMaps: new Map(),
      carForums: {}, // 文章列表
      type: {},
      emptyShow: false,
      emptyTitle: '',
      allLoaded: false, // 是否全部加载完成
    };
  },
  beforeRouteEnter: (to, from, next) => {
    next(vm => {
      ListArticleCategory.bind(vm)({}, resp => {
        vm.articleCategorys = resp.articleCategorys
        // 判断当前是否进入指定频道, 
        vm.type = vm.categoryId
          ? vm.categoryId
          : vm.articleCategorys[0].id;

        for (let articleCate of vm.articleCategorys) {
          vm.categoryMaps.set(articleCate.id, articleCate.name)
        }
      })
    })
  },
  // 在当前路由改变，但是该组件被复用时调用
  beforeRouteUpdate(to, from, next) {
    // 目录id更新
    this.type = to.params.categoryId
      ? to.params.categoryId
      : this.articleCategorys[0].id;
    next();
  },
  created() {
    // this.$nextTick(() => {
    //   this.getArticle(this.type).then(() => {
    this.init = true;
    //   })
    // })
  },
  methods: {
    // 分页信息初始化
    pageInit() {
      this.page = {
        index: 0,
        count: 6
      }
    },
    // 跳转到文章详情
    goDetail(params) {
      this.$router.push({
        name: "channelDetail",
        query: {
          channel: JSON.stringify(params.item)
        }
      });
    },
    // 获取文章list
    getArticle(callback) {
      let vm = this
      return new Promise((resolve, reject) => {
        console.log("invoke get Articles")
        ListCarForum.bind(vm)({
          categoryId: vm.type,
          index: vm.page.index.toString(),
          count: vm.page.count.toString()
        }, resp => {
          vm.emptyShow = false;
          // 是否全部加载完, 无新数据
          if (!resp.carForums || resp.carForums.length < vm.page.count) {
            vm.allLoaded = true;
          }

          // 翻页
          vm.page.index = vm.page.index + vm.page.count;

          // 数据处理
          resp.carForums.forEach(item => {
            // 以频道为维度, 保存数据
            if (!vm.carForums[item.categoryName]) {
              vm.carForums[item.categoryName] = [];
            }
            vm.carForums[item.categoryName].push({
              id: item.id,
              name: item.title,
              image: item.logo,
              url: vm.addPath(item.path),
              publishDate: item.publishDate,
              desc: item.desc
            });
          })
          vm.carForums = Object.assign({}, vm.carForums)
          // 确保empty信息, 不会在切换频道的时候一闪而过
          vm.emptyShow = vm.carForums ? false : true
          vm.emptyTitle = vm.categoryMaps.get(vm.type)

          resolve(callback)
        }, (err, code) => {
          reject()
        })
      })
    }
  },
  watch: {
    // 频道信息改变时, 获取数据, 切换展示
    type(newVal, oldVal) {
      this.carForums = {};
      this.init = false;
      this.allLoaded = false;

      // 切换路由的param, 与categoryId同步
      this.$router.replace({
        name: "channel",
        params: {
          categoryId: newVal
        }
      });

      // 初始化信息并查询
      this.pageInit()
      this.getArticle().then(()=>{
        this.init = true;
      });
    }
  },

};
</script>
<style>
.channel-harder-bar {
  height: 42px;
      position: absolute;
    right: 0;
    top: 0;
    padding-top: 10px;
  z-index: 2323323;
}

#channel .back {
  position: relative;
  left: 5px;
}

.channel-title {
  font-size: 1.3rem;
  margin-left: 10px;
  border-left: 2px solid #fbad59;
  padding-left: 8px;
  display: inline-block;
  margin-top: -4px;
  position: relative;
  top: -14px;
  z-index: 203212;
  color: #1a1a1a;
}

#channel .date {
  color: #929292;
  font-size: 1.1rem;
}

#channel .desc {
  display: inline-block;
  margin-top: 0.4em;
}

#channel .loading span {
  display: inline-block;
  margin-top: 40px;
}

#channel .desc,
#channel .desc p {
  color: #666666;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
  white-space: nowrap;
  display: block;
  width: 140px;
}

#channel .panel_box_img {
  width: 100px;
}

#channel .panel_h4 {
  font-size: 1.3rem;
}
.mu-menu-item-wrapper.active {
  color: #fbad59;
}

.mu-dropDown-menu-text {
  text-align: right;
}

#channel .mu-text-field {
  margin-top: 14px;
  font-size: 1.3rem;
}

#channel .mu-text-field-line {
  display: none;
}

.channel-all-box {
  position: relative;
  margin-top: -40px;
}

.channel-for-all {
  margin-top: 30px;
  display: block;
}

.underline-focus-class {
  background-color: #fbad59;
}

#channel .scroller {
  margin: 0;
  width: 100%;
}
#channel #panel {
  padding-right: 8px;
}
</style>
